<template>
  <div class="setting-panel-gui">
    {{#if isUseGroup}}
      {{> prop-config-by-group-tpl
        configs=configs
        componentTypes=componentTypes
        selectOpts=selectOpts
        toggleCol=''
        level=1
        isFlat=false
      }}
    {{else}}
      {{> prop-config-tpl
        configs=configs
        componentTypes=componentTypes
        selectOpts=selectOpts
        toggleCol=''
        level=1
        isFlat=false
      }}
    {{/if}}
  </div>
</template>

<script lang='ts'>
import { defineComponent, PropType, toRef } from 'vue'
import {
  {{#each selectOpts}}
  {{this}},
  {{/each}}
} from '@/data/select-options'
import { {{comName}} } from './{{fileName}}'

export default defineComponent({
  name: 'V{{comName}}Prop',
  props: {
    com: {
      type: Object as PropType<{{comName}}>,
      required: true,
    },
  },
  setup(props) {
    const config = toRef(props.com, 'config')

    return {
      config,

      {{#each selectOpts}}
      {{this}},
      {{/each}}
    }
  },
})
</script>
